<template>
    <div>
        <mt-swipe
            class="swiper"
            :auto="4000"
            :showIndicators="false"
        >
            <mt-swipe-item
                v-for="(item, index) in bannerData"
                :key="index"
            >
                <img :src="item" />
            </mt-swipe-item>
        </mt-swipe>
        <div class="title">
            <p>{{goodsSource.name}}</p>
            <p>¥ {{price}}</p>
        </div>
        <div
            class="select"
            @click="clickSelect"
        >
            <span>
                规格
            </span>
            <div>
                <span>请选择规格</span>
                <img src="../../asset/icon/icon_right.png">
            </div>
        </div>
        <div class="contHeadline">
            详情介绍
        </div>
        <div
            class="cont"
            v-html="goodsSource.infor"
        >
        </div>
        <div class="bottom">
            <div>
                <span>价格:</span>
                <span>￥{{jotal()}}</span>
            </div>
            <router-link to="/car">
                <img src="../../asset/icon/icon_goods_car.png">
                <p>购物车</p>
            </router-link>
            <div @click="clickSelect">
                立即购买
            </div>
        </div>
        <div
            class="selectCont"
            v-show="showSelect"
            @click="clickSelect"
        >
            <div @click.stop>
                <div>
                    <img :src="goodsSource.img">
                    <span>￥{{price}}</span>
                </div>
                <div>
                    <div
                        v-for="(item, index) in typeData"
                        :key="index"
                    >
                        <p>规格</p>
                        <div>
                            <label
                                :for="value.goods_attr_id"
                                v-for="(value,valueIndex) in item.values"
                                :key="valueIndex"
                            >
                                <input
                                    type="radio"
                                    :id="value.goods_attr_id"
                                    :name="'attr' + index"
                                    @change="changeAttr(index,valueIndex)"
                                >
                                <div>
                                    {{value.attr_value}}
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
                <div>
                    <span>数量</span>
                    <div>
                        <div @click="changeNumber('minus')">-</div>
                        <div>{{number}}</div>
                        <div @click="changeNumber('add')">+</div>
                    </div>
                </div>
                <div>
                    <div @click="addCar('addCar')">加入购物车</div>
                    <div @click="addCar('pay')">
                        立即购买
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "goods",
    data() {
        return {
            bannerData: [
            ],
            contData: [
            ],
            typeData: [],
            attr: [],
            goodsSource: {},
            changeValue: '',
            number: 1,
            showSelect: false,
            total: 0,
            price: 0,

        };
    },
    methods: {
        goodsPrice() {
            if (this.attr.length == 0) {
                this.price = Number(this.goodsSource.price);

            } else {
                let newprice = 0
                for (let i in this.attr) {
                    newprice += Number(this.attr[i].attr_price)
                }
                this.price = Number(this.goodsSource.price) + Number(newprice);
            }
        },
        jotal() {
            let num = Number(this.goodsSource.price)
            for (let i in this.attr) {
                num += Number(this.attr[i].attr_price)
            }
            this.total = num
            return num * this.number
        },

        addCar(type) {
            if (this.attr.length !== this.typeData.length) {
                this.$dialog.toast({
                    mes: '请选择商品规格',
                    timeout: 1000
                });
                return;
            }
            let nuwgoods_sn = this.$route.query.goods_id
            let nuwgoods_attr = ''
            for (let i in this.attr) {
                nuwgoods_sn += '#' + String(this.attr[i].goods_attr_id)
                nuwgoods_attr += String(this.attr[i].attr_value) + '#'
            }
            let params = {
                gid: this.$route.query.goods_id,
                num: this.number,
                goods_sn: nuwgoods_sn,
                goods_attr: nuwgoods_attr
            }
            if (this.$route.query.type == 'goods') {
                params.from_order = this.$route.query.order_id
            }
            this.$post("cart/putCart", params)
                .then(res => {
                    if (res.code === 20000) {
                        if (type == 'addCar') {
                            this.$dialog.toast({
                                mes: '加入成功',
                                timeout: 1000
                            });
                        } else {
                            this.$router.push({
                                path: "/pay",
                                query: {
                                    goods: res.data,
                                }
                            })
                        }
                    } else {
                        this.$dialog.toast({
                            mes: res.msg,
                            timeout: 2000
                        });
                    }
                })
                .catch(err => { });
        },
        changeAttr(index, valIndex) {
            this.attr[index] = this.typeData[index].values[valIndex]
            this.goodsPrice()
        },
        changeNumber(type) {
            switch (type) {
                case 'minus':
                    if (this.number === 1) {
                        break
                    } else {
                        this.number--;
                    }
                    break
                case 'add':
                    this.number++;
                    break
                default:
                    break
            }
        },

        clickSelect() {
            if (!this.showSelect) {
                document.querySelector("body").setAttribute("style", "overflow:hidden;background-color:#fff");
            } else {
                document.querySelector("body").setAttribute("style", "overflow:scroll;background-color:#fff");
            }
            this.showSelect = !this.showSelect
        },
        // // 方法
        goodsData() {
            let params = {
                gid: this.$route.query.goods_id
            };
            this.$post("Goods/getGoodsInfo", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.bannerData = res.data.gallery
                        for (let i in res.data.attribute) {
                            this.typeData.push(res.data.attribute[i])
                        }
                        this.goodsSource = res.data

                        this.goodsPrice()
                    }
                })
                .catch(err => { });
        },

    },

    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#fff");
    },
    created() {
        // 实例创建完成
        this.goodsData();
    },
    computed: {

    },
};
</script>
<style lang="less" scoped >
@import url("../../asset/css/goods");
</style>